<template>
  <div>
    <header>
      <van-row type="flex" justify="space-between">
        <van-col span="8">
          <router-link to="/layout/Mine">
            <van-icon name="arrow-left" />
          </router-link>
        </van-col>
        <van-col span="8">返回我的页面</van-col>
        <van-col span="8"></van-col>
      </van-row>
    </header>
    <div class="logo">
      <img src="../assets/logo.jpg" alt="" />
      <p>开眼界观天下</p>
    </div>
    <div class="formBody">
      <!-- 输入账号 -->
      <van-field v-model="text" label="账号" placeholder="请输入账号" />
      <!-- 输入密码 -->
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
      <!-- 再次输入密码 -->
      <van-field
        v-model="password"
        type="password"
        label="确认密码"
        placeholder="请确认密码"
      />
      <!-- 输入昵称 -->
      <van-field v-model="text2" label="昵称" placeholder="请输入昵称" />
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="tel"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="info" @click="send"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <van-button
        @click="register"
        size="large"
        type="info"
        style="margin-top: 20px; height: 40px"
        >注册</van-button
      >
    </div>
  </div>
</template>
<script>
import { getRegister, getCode } from "../api/api";
export default {
  data() {
    return {
      // 手机号
      tel: "",
      //   账号
      text: "",
      //   密码
      password: "",
      //   验证码
      sms: "",
      //   昵称
      text2: "",
    };
  },
  methods: {
    register() {
      getRegister(
        this.text,
        this.sms,
        this.tel,
        this.password,
        this.text2
      ).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$notify({
            type: "success",
            message: "注册成功,2秒后跳转到登录页",
          });
          setTimeout(() => {
            this.$router.push("/login");
          }, 2000);
        } else {
          this.$notify({
            type: "danger",
            message: "输入格式不正确",
          });
        }
      });
    },
    send() {
      getCode(this.tel).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #eee;
}
.logo {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  margin-bottom: 10px;
  img {
    width: 120px;
    height: 120px;
  }
  p {
    margin-top: 20px;
    color: #409eff;
    font-size: 20px;
  }
}
.formBody {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  .van-cell {
    height: 40px;
    font-size: 16px;
  }
}
</style>